<template>
	
	<view>
		<uni-easyinput  prefixIcon="person" focus placeholder="搜索汽油站"></uni-easyinput>
	</view>
	
	<!-- 轮播图 -->
	<view class="home">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular indicator-dots autoplay interval="3000" duration="1000">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in swipers"  >
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 按钮 -->
		<view class="renzheng">
		<button  style="float: left;">油气订单</button>
		<button  style="float: right;"> 油气积分</button>
		</view>

	

	<view class="xiala">
		<uni-combox
		style="float: left;"
	    :candidates="candidates01"
	    placeholder=""
	    v-model="city01"
	    @input="comboxInput"
	  ></uni-combox>
	  <view class="result-box">
	    <!-- <text>所选为：{{ city }}</text> -->
	  </view>
		</view>

		<view @click="">
			<uni-combox
		style="float: right;"
		    :candidates="candidates"
		    placeholder=""
		    v-model="city"
		    @input="comboxInput"
		  ></uni-combox>
		  <view class="result-box">
		    <!-- <text>所选为：{{ city }}</text> -->
		  </view>
			</view>
			<view class="ComBox">
				<div class="ComList" v-for="item in ComListSon" :key="item.id" @click="ToDel(item.id) ">
					
					<img :src="item.img" class="Img" alt="">
					{{item.title}}
					￥{{item.price}}

						
						
					
				</div>
			</view>
</template>
<script>
	
	
	
	
	
	export default {
		
		
			data() {
				
				  
				
				return {
					
					ComList: [],  //被合并的列表
					ComListSon: [{
					
							id: 1,
							img: "/pages/tupian/001.png",
							title: '藏为省略号。',
							price: '156',
							
						},
						{
							id: 2,
							img: "/pages/tupian/001.png",
							title: '出两行的时候',
							price: '156'
						},
						{
							id: 3,
							img: "/pages/tupian/001.png",
							title: '超出两行的时候',
							price: '156'
						},
						{
							id: 4,
							img: "/pages/tupian/001.png",
							title: '藏为省略号。',
							price: '156'
						},
						{
							id: 5,
							img: "/pages/tupian/001.png",
							title: '隐藏为省略号。',
							price: '156'
						}
					],
					page: 1, //页数
					
					  candidates: ["柴油", "天然气", "汽油", "武汉", "天津", "上海", "海口"],
					  city: "",
					candidates01: ["最近", "最远", "东", "武", "天", "上", "海"],
					city01: "",
					swipers:[
						
						'/pages/tupian/1.jpg',
						'/pages/tupian/2.jpg',
						'/pages/tupian/3.jpg'
					]
				}
			},
			methods: {
				ToDel(id) {
					
					//参数在跳转页的onLoad(id){ console.log('id为' + id) } 中获取  
					wx.showToast({
						title: '将要跳转的详情页id为' + id,
						icon: 'none',
						duration: 500,
						
					});  
				},
				getComList(page) { //参数为页数
					// 将获取的第page页数据合并进原数组   举例
					// axios.post('/list',{page:page}).then(res=>{
					// 	if(res.code == 1){ //接口调用成功
					// 		 this.ComListSon = res.data
					// 	}else{
					// 		wx.showToast(
					// { title: res.mes?res.msg:'信息获取错误',
					// icon: 'none', duration: 500 });
					// 	}
					// 	Array.prototype.push.apply(this.ComList, this.ComListSon);
					 //合并加载更多的数据与源数据.
					// })
					//
				}
			},
		}
</script>
<style lang="scss">
	.xiala{
		width: 180px;
	}
	.home{
			swiper{
				width: 750rpx;
				height: 470rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
.renzheng{
	
}
</style>


